<template>
  <div class="box">
    <div class="list_box">
      <div class="list on1">
        <p class="title">退款原因 </p>
        <picker mode="selector" @change="refundChange" :range="msg.refundCauseList" range-key="cause">
          <p class="text">{{query.refundCause}}<van-icon name="arrow" /></p>
        </picker>
      </div>
      <div class="list">
        <p class="title">退款金额</p>
        <p class="text">￥{{msg.realPrice}}</p>
      </div>
      <div class="list on">
        <p class="title">退款理由</p>
        <p class="textarea">
          <textarea v-model="query.backRemarks" placeholder="请输入理由" name="" id="" cols="30" rows="10"></textarea>
        </p>
      </div>
      <div class="photo">
        <p class="title">上传凭证</p>
        <div class="box1">
          <div class="nr">
            <block v-if="query.backPic.length">
              <div class="img_box" v-for="(item,index) in query.backPic" :key="index">
                <img @click="preview(item)" mode="aspectFill" :src="item" alt="">
                <p @click="close(index)"><van-icon name="cross" size="12"/></p>
              </div>
            </block>
            <div class="img" @click="changeImg">
              <img mode="widthFix" src="/static/images/photo.png" alt="" />
              <p>最多3张</p>
            </div>
          </div>
          
        </div>
      </div>
      <div class="text_t">
        <p class="text">退款说明</p>
        <p class="text">1.订单开始前退款原路返回，优惠券或者美团券直接退回。</p>
        <p class="text">2.消费中订单不允许退款。</p>
      </div>
    </div>
    <div class="button_box">
      <div class="box1" :style="{paddingBottom:isIphoneXnum+'px'}">
        <van-button 
          @click="submit"
          :disabled="loading"
          :loading="loading" 
          loading-text="退款中..."
          type="primary"
          color="#3d98f7"
          custom-style="font-family: PingFangSC-Regular, PingFang SC;border:none;width: 690rpx;height:80rpx;line-height: 80rpx;background: #00C200;border-radius: 40rpx;text-align: center;color: #fff;font-size: 32rpx;"
        >确认退款</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { 
  getOrderBack,
  refund
} from "@/api/index";
import { getToken,getRefreshToken } from "@/utils/auth";
export default {
  data(){
    return{
      isIphoneXnum:0,
      query:{
        backRemarks:'',
        backPic:[],
        orderId:'',
        refundCause:'请选择退款原因'
      },
      msg:{},
      loading:false
    }
  },
  methods:{

    // 提交
    submit(){
      if(this.query.refundCause == '请选择退款原因'){
        this.$toast('请选择退款原因')
        return
      }
      this.$showLoading('退款中...')
      this.loading = true
      refund(this.query).then(res=>{
        if(res.statusCode == '00000'){
          this.$toast('退款成功')
          setTimeout(() => {
            wx.navigateBack({
              delta: 1
            });
          }, 1000);
        }else{
          wx.hideLoading()
          this.loading = false
          this.$toast(res.message)
        }
      })
    },

    // 获取订单信息
    getOrderMsg(orderId){
      getOrderBack({orderId}).then(res=>{
        if(res.statusCode == '00000'){
          this.msg = res.data
        }
      })
    },

    refundChange(e){
      let index = +e.mp.detail.value
      this.query.refundCause = this.msg.refundCauseList[index].cause
      console.log(e)
    },

    changeImg(){
      if(this.query.backPic.length >= 3){
        this.$toast('最多上传3张！')
        return
      }
      let arr = []
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success :(res)=>{
          wx.showLoading({title: '上传中...'})
          console.log(res)
          // tempFilePath可以作为img标签的src属性显示图片
          wx.uploadFile({
            url: 'https://gxegateway.jiuzhours.com/rich-sparrow-god/file/fileUpload',
            name: 'file',
            method: 'POST',
            filePath: res.tempFilePaths[0],
            header: {
              'Authorization': `Bearer ${getToken()}`,
              'refreshToken':getRefreshToken(),
            },
            formData: {
              file: res.tempFilePaths[0],
            },
            success: (res) => {
              this.$toast('上传成功！')
              let returnData = JSON.parse(res.data)
              arr.push(returnData.data)
              this.query.backPic = this.query.backPic.concat(arr)
              console.log(arr)
              console.log(this.query.backPic)
            },
            fail: (err) => {
              console.log(err)
              this.$toast('上传失败，请重新上传！')
              wx.hideLoading()
            }
          })
          
        }
      })
    },
    close(index){
      let arr = []
      arr = this.query.backPic
      arr.splice(index, 1)
      this.query.backPic = []
      this.query.backPic = arr
    },
    preview(img){
      wx.previewImage({
        current: img, // 图片的地址url
        urls: this.query.backPic // 预览的地址url
      })
    },
  },
  onShow(){
    this.loading = false
  },
  onLoad(options){
    console.log(options)
    this.query.orderId = options.orderId
    this.getOrderMsg(options.orderId)
    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25;
        } else {
          this.isIphoneXnum = 0;
        }
      },
    });
  },
  onUnload() {
    this.query.refundCause = '请选择退款原因'
    this.query.backRemarks = ''
    this.query.backPic = []
  },
}
</script>

<style lang="scss" scoped>
.box{
  min-height: 100vh;
  background: #F5F5F5;
  padding-top:24rpx;
  .list_box{
    margin:0 32rpx;
    background: #fff;
    box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(30,53,88,0.02);
    border-radius: 16rpx;
    padding-bottom:24rpx;
    .list{
      display: flex;
      justify-content: space-between;
      min-height: 88rpx;
      align-items: center;
      border-bottom:1px solid #F2F1F4;
      margin-left:32rpx;
      .title{
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #666666;
      }
      .text{
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #111111;
        margin-right:32rpx;
      }
      &.on1{
        border-bottom:none;
        background: linear-gradient(158deg, #D6FFD6 0%, #FFFFFF 28%, #D8FFD8 100%, #88F388 100%);
        padding:0 32rpx;
        border-top-right-radius: 16rpx;
        border-top-left-radius: 16rpx;
        margin-left:0;
        .text{
          margin-right:0;
        }
      }
      &.on{
        display: block;
        border-bottom:none;
        .title{
          margin:28rpx 0;
        }
        .textarea{
          width: 88%;
          height: 200rpx;
          background: #FFFFFF;
          border-radius: 8rpx;
          border: 2rpx solid #EEEEEE;
          padding:24rpx;
          textarea{
            width: 100%;
            height: 100%;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
          }        
        }
      }
    }
    .photo{
      width: 90%;
      margin:0 auto;
      margin-bottom:30rpx;
      .title{
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #666666;
        margin:28rpx 0; 
      }
      .box1{
        .nr{
          display: flex;
          flex-wrap:wrap;
        }
        .img{
          width: 156rpx;
          height: 156rpx;
          background: #F8F8F8;
          border-radius: 12rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction:column;
          margin-right:20rpx;
          img{
            width: 48rpx;
            height: 40rpx;
          }
          p{
            font-size: 30rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            margin-top:16rpx;
          }
        }
        .img_box{
          width: 140rpx;
          height: 140rpx;
          position: relative;
          margin-right:40rpx;
          img{
            width: 140rpx;
            height: 140rpx;
            border-radius: 20rpx;
          }
          p{
            position: absolute;
            top: -12rpx;
            right: -16rpx;
            width: 40rpx;
            height: 40rpx;
            background: #333;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color:#fff;
          }
        }
        
      }
    }
    .text_t{
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #999999;
      margin:24rpx 32rpx;
      .text{
        margin-top:10rpx;
      }
    }
  }
  .button_box{
    width: 100%;
    height: 144rpx;
    .box1{
      width: 100%;
      height: 144rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom:0;
      left:0;
      box-shadow: 0rpx -2rpx 2rpx 0rpx rgba(0,0,0,0.02);
      background: #fff;
    }
    .button{
      background: #222222;
      color: #fff;
      font-size: 30rpx;
      text-align: center;
      height: 96rpx;
      width: 90%;
      line-height: 96rpx;
      border-radius: 4rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .button::after{
      border:none;
    }
  }
}
</style>